import type { App, Directive } from 'vue';

import { TooltipEnum } from '@/enums/index';

/**
 * 解决列表出现滚动时 tooltips 错位
 */
const scrollHideTooltipsDirective: Directive = {
  mounted(el) {
    el.addEventListener('scroll', () => {
      const elList: HTMLCollectionOf<Element> = document.getElementsByClassName(
        TooltipEnum.POPPER_CLASS,
      );

      Array.from(elList).forEach((tipItem) => {
        if (tipItem) {
          (tipItem as HTMLElement).style.display = 'none';
          (tipItem as HTMLElement).style.zIndex = '-1';
        }
      });
    });
  },
};

export function setupScrollHideTooltipsDirective(app: App) {
  app.directive('scrollHideTooltips', scrollHideTooltipsDirective);
}

export default setupScrollHideTooltipsDirective;
